@charset "UTF-8";
div{
	float:left;
	padding:2px;
}
li{
	
      list-style:none;
}
button:focus{
	outline: none;
}
#container{
	background: #e9e9e9;
	width:100%;
	height:720px;
	
}

.listop{
	background-color: black; 
    border: none;
    color: white;
    padding: 14px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-right:30px;
}
.ment_simple {
	position:relative;
	font-size:24px;
	text-align:center;
	width:150px;
	height:40px; 
	
	transition-duration: 1s;
	display:block;
	line-height:40px;
	cursor:pointer;
}

.ment_simple :before {
	content:"";
	position:absolute;
	z-index:1;
	left:25px;
	bottom:-8px;
	width:150px;
	height:2px;
	background:white;
	transform:scaleX(0);
	transition:transform 1s;
}
.ment_simple :hover:before {
	transform:scaleX(1);
}
.ment_simple:hover{
	font-size:35px;
	margin:20px;
	margin-left:45px;
	width:200px;
	height:60px; 
	transition-duration: 1s;
}

.ment_simple{
	
	margin-bottom:40px;
	margin-left:70px;
	position:relative;
	transition-duration: 1s;
}
.ment_simple_0{
	position:absolute;
	left:0;
	top:0;
	height:10px;
	width:10px;
	
	border-left:solid 2px white;
	border-top:solid 2px white;
}
.ment_simple_1{
	position:absolute;
	right:0;
	top:0;
	height:10px;
	width:10px;
	
	border-right:solid 2px white;
	border-top:solid 2px white;
}
.ment_simple_2{
	position:absolute;
	left:0;
	bottom:0;
	height:10px;
	width:10px;
	
	border-left:solid 2px white;
	border-bottom:solid 2px white;
}

.ment_simple_3{
	position:absolute;
	right:0;
	bottom:0;
	height:10px;
	width:10px;
	
	border-right:solid 2px white;
	border-bottom:solid 2px white;
}
#tips{
	padding:30px;
	border:solid;
	border-radius:25px;
}
#tips p{
	font-size:27px;
	
}
.filecontent{
	position: absolute;
	  left:90%;
	  top:32%;
     overflow: hidden;
     width: 30px;
	 height: 30px;
	 
     line-height: 34px;
     
  
     text-align: center;
   
     cursor: pointer;
}
.filecontent i{
	z-index: 5;
}
.filecontent input {
    display: inline-block;
    position: absolute;
    font-size: 12px;
	opacity: 0;
  	cursor: pointer;
  	z-index: 1;
}

#emotion_head ul,#wordcloud_head ul,#jieba_head ul ,#kmeans_head ul{
    display: flex;
    position: relative;
    width: 100%;
    height:80%;
    top:40%;
  	left:50%;
    z-index:2;
    transform: translate(-50%, -50%);
}

#emotion_head li ,#wordcloud_head li,#jieba_head li,#kmeans_head li{
    position: relative;
    padding-top:10px;
    padding-bottom:37px;
    font-size: 15px;
    width:200px;
    color: rgb(0, 0, 0);
    line-height: 1;
    transition: 0.2s all linear;
    text-align:center;
    cursor: pointer;
}

#emotion_head li::before ,#wordcloud_head li::before,#jieba_head li::before,#kmeans_head li::before{
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid rgb(0, 0, 0);
    transition: 0.2s all linear;
}

#emotion_head li:hover::before ,#wordcloud_head li:hover::before,#jieba_head li:hover::before,
#kmeans li:hover::before{
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: rgb(0, 0, 0);
    z-index: 2;
}

#emotion_head li:hover ~ li::before,#wordcloud_head li:hover ~ li::before,#jieba_head li:hover ~ li::before ,
#kmeans_head li:hover ~ li::before{
    left: 0;
}

#emotion_head li:active ,#wordcloud_head li:active,#jieba_head li:active,#kmeans_head li:active{
    background: #000;
    color: #fff;
}
.chart_simple_0{
	position:absolute;
	left:0;
	top:0;
	height:20px;
	width:20px;
	border-left:solid 3px black;
	border-top:solid 3px  black;}
.char_0_hover{
	animation: ani_char_0 1s infinite;
}
@keyframes ani_char_0{
	0%{
	left:0;
	top:0;
	}
	50%{
	left:-5px;
	top:-5px;	
	}
	100%{
	left:0;
	top:0;
	}
}
.chart_simple_1{
	position:absolute;
	right:0;
	top:0;
	height:20px;
	width:20px;
	
	border-right:solid 3px black;
	border-top:solid 3px black;
}
.char_1_hover{
	animation: ani_char_1 1s infinite;
}
@keyframes ani_char_1{
	0%{
	right:0;
	top:0;
	}
	50%{
	right:-5px;
	top:-5px;	
	}
	100%{
	right:0;
	top:0;
	}
}
.chart_simple_2{
	position:absolute;
	left:0;
	bottom:0;
	height:20px;
	width:20px;
	
	border-left:solid 3px black;
	border-bottom:solid 3px black;
}
.char_2_hover{
	animation: ani_char_2 1s infinite;
}
@keyframes ani_char_2{
	0%{
	left:0;
	bottom:0;
	}
	50%{
	left:-5px;
	bottom:-5px;
	}
	100%{
	left:0;
	bottom:0;
	}
}
.chart_simple_3{
	position:absolute;
	right:0;
	bottom:0;
	height:20px;
	width:20px;
	
	border-right:solid 3px black;
	border-bottom:solid 3px black;
}
.char_3_hover{
	animation: ani_char_3 1s infinite;
}
@keyframes ani_char_3{
	0%{
	right:0;
	bottom:0;
	}
	50%{
	right:-5px;
	bottom:-5px;
	}
	100%{
	right:0;
	bottom:0;
	}
}
#model0,#model1,#model2,#model3{
	background:rgb(242, 242, 242);
}
#model0:hover,#model1:hover,#model2:hover,#model3:hover{
	background:rgb(222, 222, 222) ;
}